<template>
  <nav class="nav-menu" :class="{
    'menu-open': isMobileMenuOpen,
    'nav-transparent': isAtTop
  }">
    <div class="nav-container">
      <!-- 左侧区域：Logo + 导航链接 -->
      <div class="nav-left">
        <div class="nav-logo">
          <BlogLogo :is-transparent="isAtTop" />
        </div>

        <div class="nav-links">
          <router-link to="/" class="nav-item" active-class="active">
            <PhHouse :size="20" :color="computedColor" weight="duotone" />
            <span>首页</span>
          </router-link>

          <router-link to="/albums" class="nav-item" active-class="active">
            <PhBooks :size="20" :color="computedColor" weight="duotone" />
            <span>相册</span>
          </router-link>

          <router-link to="/archived" class="nav-item" active-class="active">
            <PhArchive :size="20" :color="computedColor" weight="duotone" />
            <span>归档</span>
          </router-link>

          <router-link to="/timeline" class="nav-item" active-class="active">
            <PhChartLineUp :size="20" :color="computedColor" weight="duotone" />
            <span>时间线</span>
          </router-link>

          <div class="nav-item dropdown">
            <PhInfo :size="20" :color="computedColor" weight="duotone" />
            <span>关于</span>
            <div class="dropdown-menu">
              <router-link to="/about" class="dropdown-item" active-class="active">
                <PhGlobe :size="20" :color="computedColor" weight="duotone" />
                <span>关于本站</span>
              </router-link>
              <router-link to="/update" class="dropdown-item" active-class="active">
                <PhClockClockwise :size="20" :color="computedColor" weight="duotone" />
                <span>更新日志</span>
              </router-link>
              <router-link to="/links" class="dropdown-item" active-class="active">
                <PhLink :size="20" :color="computedColor" weight="duotone" />
                <span>友情链接</span>
              </router-link>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧区域：搜索框 + 头像 -->
      <div class="nav-right">
        <div class="search-box">
          <i>
            <PhMagnifyingGlass :size="20" :color="computedColor" weight="duotone" />
          </i>
          <input
            v-model="searchQuery"
            type="text"
            placeholder="搜索文章..."
            @keydown.enter="handleSearch"
          >
        </div>

        <div class="user-avatar">
          <img
            @click="handleAvatarClick"
            :src="userStore.avatar || 'https://image.starmist.net/blog/avatar/8c7a316d-25fb-4767-bcfa-cbf99a127b0d.png'"
            :alt="userStore.nickname || '未登录'"
            class="avatar-img"
          >
          <!-- 用户下拉菜单 -->
          <div v-if="userStore.isLoggedIn" class="user-dropdown" v-show="showUserMenu">
            <div class="user-info">
              <img :src="userStore.avatar || 'https://image.starmist.net/blog/avatar/8c7a316d-25fb-4767-bcfa-cbf99a127b0d.png'" class="mini-avatar" >
              <div class="user-details">
                <span class="nickname">{{ userStore.nickname }}</span>
                <span class="email">{{ userStore.email }}</span>
              </div>
            </div>
            <div class="menu-divider"></div>
            <div class="dropdown-items">
              <div class="dropdown-item" @click="handleProfileClick">
                <PhUser :size="16" />
                <span>个人资料</span>
              </div>
              <div class="dropdown-item" @click="handleLogout">
                <PhSignOut :size="16" />
                <span>退出登录</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 移动端菜单按钮 -->
      <button class="hamburger" :class="{ 'active': isMobileMenuOpen }" @click="toggleMenu">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>

    <!-- 移动端菜单 -->
    <div class="mobile-menu">
      <div class="mobile-nav">
        <div class="mobile-nav-items">
          <router-link to="/" class="mobile-item" @click="closeMenu">
            <div class="item-content">
              <PhHouse :size="20" :color="computedColor" weight="duotone" />
              <span>首页</span>
            </div>
          </router-link>

          <router-link to="/albums" class="mobile-item" @click="closeMenu">
            <div class="item-content">
              <PhBooks :size="20" :color="computedColor" weight="duotone" />
              <span>相册</span>
            </div>
          </router-link>

          <router-link to="/archived" class="mobile-item" @click="closeMenu">
            <div class="item-content">
              <PhArchive :size="20" :color="computedColor" weight="duotone" />
              <span>归档</span>
            </div>
          </router-link>

          <router-link to="/timeline" class="mobile-item" @click="closeMenu">
            <div class="item-content">
              <PhChartLineUp :size="20" :color="computedColor" weight="duotone" />
              <span>时间线</span>
            </div>
          </router-link>

          <div class="mobile-item">
            <div class="mobile-dropdown" @click="toggleMobileSubmenu">
              <div class="item-content">
                <PhBooks :size="20" :color="computedColor" weight="duotone" />
                <span>关于</span>
              </div>
              <i class="arrow" :class="{ 'active': isMobileSubmenuOpen }">▾</i>
            </div>

            <transition name="slide">
              <div class="mobile-submenu" v-show="isMobileSubmenuOpen">
                <router-link to="/about" class="submenu-item" @click="closeMenu">
                  <PhGlobe :size="20" :color="computedColor" weight="duotone" />
                  <span>关于本站</span>
                </router-link>
                <router-link to="/update" class="submenu-item" @click="closeMenu">
                  <PhClockClockwise :size="20" :color="computedColor" weight="duotone" />
                  <span>更新日志</span>
                </router-link>
                <router-link to="/links" class="submenu-item" @click="closeMenu">
                  <PhLink :size="20" :color="computedColor" weight="duotone" />
                  <span>友情链接</span>
                </router-link>
              </div>
            </transition>
          </div>
        </div>
      </div>
    </div>

    <!-- 登录弹窗 -->
    <LoginModal
      :visible="showLoginModal"
      @update:visible="args => showLoginModal=args"
    />
    <!-- 个人资料弹窗 -->
    <ProfileModal v-model:visible="showProfileModal" @update:visible="args => showProfileModal=args" />
  </nav>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import BlogLogo from '@/components/blog-logo.vue';
import LoginModal from '@/components/login-modal.vue';
import {
  PhArchive,
  PhBooks,
  PhChartLineUp,
  PhClockClockwise,
  PhFunction,
  PhGear,
  PhGlobe,
  PhHouse,
  PhInfo, PhLink,
  PhMagnifyingGlass,
  PhSignOut,
  PhUser
} from '@phosphor-icons/vue';
import { useUserStore } from '@/stores';
import ProfileModal from '@/components/profile-modal.vue';

const router = useRouter();
const isMobileMenuOpen = ref(false);
const isMobileSubmenuOpen = ref(false);
const isAtTop = ref(true);
const searchQuery = ref('');
const showLoginModal = ref(false);
const showUserMenu = ref(false);
const userStore = useUserStore();
const showProfileModal = ref(false);

// 处理搜索
const handleSearch = () => {
  if (!searchQuery.value.trim()) return;
  router.push(`/search?keyword=${encodeURIComponent(searchQuery.value.trim())}`);
  searchQuery.value = '';
};

// 处理头像点击
const handleAvatarClick = () => {
  if (userStore.isLoggedIn) {
    showUserMenu.value = !showUserMenu.value;
  } else {
    showLoginModal.value = true;
  }
};
// 处理退出登录
const handleLogout = () => {
  userStore.logout();
  showUserMenu.value = false;
};
// 在用户菜单中点击"个人资料"时打开
const handleProfileClick = () => {
  showProfileModal.value = true;
  showUserMenu.value = false; // 关闭用户菜单
};
// 滚动监听函数
const handleScroll = () => {
  isAtTop.value = window.scrollY === 0;
};

// 点击外部关闭用户菜单
const handleClickOutside = (e: MouseEvent) => {
  const target = e.target as HTMLElement;
  if (!target.closest('.user-avatar')) {
    showUserMenu.value = false;
  }
};

// 生命周期钩子
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
  document.addEventListener('click', handleClickOutside);
  handleScroll();
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
  document.removeEventListener('click', handleClickOutside);
});

const toggleMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value;
  document.body.style.overflow = isMobileMenuOpen.value ? 'hidden' : '';
};

const closeMenu = () => {
  isMobileMenuOpen.value = false;
  isMobileSubmenuOpen.value = false;
  document.body.style.overflow = '';
};

const toggleMobileSubmenu = () => {
  isMobileSubmenuOpen.value = !isMobileSubmenuOpen.value;
};

const computedColor = computed(() => {
  return isAtTop.value ? '#ebebeb' : '#3b82f6';
});
</script>
<style lang="less" scoped>
.nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;

  &.nav-transparent {
    background: transparent;
    border-bottom-color: transparent;

    .nav-item {
      color: #ffffff;

      &:hover, &.active {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.2);
      }
    }

    .hamburger span {
      background: #ffffff;
    }

    .dropdown-menu {
      background: rgba(0, 0, 0, 0.6);
    }

    .user-dropdown {
      background: rgba(0, 0, 0, 0.6);

      .menu-divider {
        background: rgba(26, 26, 26, 0.7);
      }

      .user-info {
        .user-details {
          .nickname {
            color: #ffffff;
          }
          .email {
            color: #ffffff;
          }
        }
      }

      .dropdown-item {
        &:hover {
          color: #f3f4f6;
        }
      }
    }

    .dropdown-item {
      color: #ffffff;

      &:hover {
        background: rgba(255, 255, 255, 0.2);
      }
    }

    .search-box input {
      background: rgba(255, 255, 255, 0.1);
      color: #ffffff;

      &::placeholder {
        color: rgba(255, 255, 255, 0.8);
      }

      &:hover {
        background: rgba(255, 255, 255, 0.15);
      }

      &:focus {
        background: rgba(0, 0, 0, 0.3);
        border-color: rgba(255, 255, 255, 0.1);
      }
    }

    .user-avatar {
      border-color: rgba(255, 255, 255, 0.2);

      &:hover {
        border-color: rgba(255, 255, 255, 0.8);
      }
    }
  }

  &.menu-open {
    background: rgba(255, 255, 255, 0.98);

    &.nav-transparent {
      background: rgba(0, 0, 0, 0.8);

      .mobile-menu {
        background: rgba(0, 0, 0, 0.8);

        .mobile-item {
          .submenu-item {
            color: #ffffff;
          }
          .item-content span {
            color: #ffffff;
          }
        }
      }
    }
  }
}

.nav-container {
  max-width: 1161px;
  margin: 0 auto;
  height: 64px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 48px;

  .nav-logo {
    flex-shrink: 0;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 25px;
    flex-wrap: nowrap; // 防止菜单项换行
  }
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.search-box {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;

  i {
    position: absolute;
    left: 12px;
    top: 8px;
    font-size: 14px;
    pointer-events: none;
  }

  input {
    min-width: 200px;
    height: 100%;
    padding: 0 16px 0 40px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.04);
    font-size: 14px;
    color: #1f2937;
    transition: all 0.3s ease;

    &::placeholder {
      color: #94a3b8;
    }

    &:hover {
      background: rgba(0, 0, 0, 0.06);
    }

    &:focus {
      min-width: 260px;
      outline: none;
      background: #ffffff;
      border-color: #e2e8f0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
  }
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  color: #4b5563;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s;

  &:hover, &.active {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
    transform: translateY(-1px);
  }

  &.dropdown {
    position: relative;
    cursor: pointer;

    &:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
  }
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 8px;
  margin-top: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: #4b5563;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s;

  &:hover, &.active  {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
    transform: translateY(-1px);
  }
}

.user-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  overflow: visible;
  transition: all 0.3s ease;

  &:hover {
    border-color: #3b82f6;
  }

  .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding-top: 8px;
  z-index: 1000;

  .user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
  }

  .mini-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
  }

  .user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;

    .nickname {
      font-size: 14px;
      font-weight: 500;
      color: #1f2937;
    }

    .email {
      font-size: 12px;
      color: #6b7280;
    }
  }

  .menu-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 8px 0; // 统一分割线上下间距
  }

  .dropdown-items {
    padding: 0; // 移除额外的内边距
  }

  .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: #4b5563;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    border-radius: 6px;
    margin: 8px;

    &:hover {
      background: #f3f4f6;
      color: #3b82f6;
    }
  }
}

.hamburger {
  display: none;
  width: 24px;
  height: 20px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;

  span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #4b5563;
    transition: all 0.3s;

    &:first-child {
      top: 0;
    }

    &:nth-child(2) {
      top: 9px;
    }

    &:last-child {
      bottom: 0;
    }
  }

  &.active {
    span {
      &:first-child {
        transform: translateY(9px) rotate(45deg);
      }

      &:nth-child(2) {
        opacity: 0;
      }

      &:last-child {
        transform: translateY(-9px) rotate(-45deg);
      }
    }
  }
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  width: 100%;
  height: calc(100vh - 64px);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;

  .menu-open & {
    transform: translateX(0);
  }
}
// 深色模式
@media (prefers-color-scheme: dark) {
  .nav-menu {
    background: rgba(17, 24, 39, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.1);

    &.menu-open {
      background: rgba(17, 24, 39, 0.98);
    }
  }

  .search-box {
    input {
      background: rgba(255, 255, 255, 0.08);
      color: #e5e7eb;

      &::placeholder {
        color: #9ca3af;
      }

      &:hover {
        background: rgba(255, 255, 255, 0.12);
      }

      &:focus {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
      }
    }

    i {
      color: #9ca3af;
    }
  }

  .nav-item {
    color: #e5e7eb;

    &:hover, &.active {
      color: #60a5fa;
      background: rgba(96, 165, 250, 0.1);
    }
  }

  .dropdown-menu {
    background: #1f2937;
  }

  .dropdown-item {
    color: #e5e7eb;

    &:hover {
      color: #60a5fa;
      background: rgba(96, 165, 250, 0.1);
    }
  }

  .user-dropdown {
    background: #1f2937;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

    .user-info {
      .user-details {
        .nickname {
          color: #e5e7eb;
        }
        .email {
          color: #9ca3af;
        }
      }
    }

    .menu-divider {
      background: #374151;
    }

    .dropdown-item {
      color: #e5e7eb;

      &:hover {
        background: #374151;
        color: #60a5fa;
      }
    }
  }

  .mobile-menu {
    background: rgba(17, 24, 39, 0.98);
  }

  .mobile-item {
    .item-content span {
      color: #e5e7eb;
    }
  }

  .mobile-submenu {
    background: rgba(255, 255, 255, 0.05);
  }

  .submenu-item {
    color: #e5e7eb;
  }
}
// 中等屏幕适配
@media (max-width: 1110px) {
  .nav-container {
    padding: 0 16px;

    .nav-left {
      gap: 24px; // 减小logo和导航之间的间距

      .nav-links {
        gap: 4px; // 减小导航项之间的间距
        margin-left: 12px;
      }
    }

    .nav-item {
      padding: 8px 8px; // 减小导航项的内边距
      font-size: 14px; // 稍微减小字体大小

      span {
        white-space: nowrap; // 防止文字换行
      }
    }

    .search-box input {
      min-width: 160px; // 减小搜索框的最小宽度
    }
  }
}
// 移动端适配
@media (max-width: 768px) {
  .nav-container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    padding: 0 16px;

    .nav-left {
      order: 2;
      justify-content: center;

      .nav-logo {
        margin: 0 auto;
      }

      .nav-links {
        display: none;
      }
    }

    .nav-right {
      order: 3;

      .search-box {
        display: none;
      }
    }

    .hamburger {
      display: block;
      order: 1;
    }
  }

  .mobile-menu {
    display: block;
  }

  .mobile-nav {
    padding: 20px;
  }

  .mobile-nav-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mobile-item {
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s;

    &:active {
      background: rgba(59, 130, 246, 0.08);
    }

    .item-content {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;

      .icon {
        font-size: 20px;
      }

      span {
        font-size: 16px;
        font-weight: 500;
        color: #1f2937;
      }
    }
  }

  .mobile-dropdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    cursor: pointer;
    border-radius: 12px;
    transition: background-color 0.2s;

    .arrow {
      color: #9ca3af;
      transition: transform 0.3s;

      &.active {
        transform: rotate(180deg);
      }
    }
  }

  .mobile-submenu {
    margin: 4px 8px 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 12px;
  }

  .submenu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    color: #4b5563;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s;

    .icon {
      font-size: 18px;
    }
  }
}

// 动画
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  transform: translateY(-8px);
}
</style>
